<template>
  <a-config-provider :locale="zhCN" :theme="themeConfig">
    <router-view></router-view>
    <theme-config v-model:visible="themeVisible" @change="handleThemeChange" />
  </a-config-provider>
</template>

<script setup>
import { ref } from 'vue'
import { ConfigProvider } from 'ant-design-vue'
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import ThemeConfig from '@/components/ThemeConfig.vue'

const themeVisible = ref(false)
const themeConfig = ref({
  token: {
    colorPrimary: '#1890ff'
  }
})

const handleThemeChange = (config) => {
  themeConfig.value = {
    token: {
      colorPrimary: config.primaryColor
    }
  }
}
</script>

<style>
#app {
  height: 100vh;
}
</style> 